<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-申请退换</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li class="active">积分换货</li>
                            <li @click='person_integral'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="right_box fl">
                <div class="evaluate">
                    申请退换
                </div>

                <div class="exchange_box">
                    <!-- <div class="exchange_item">
                        <div class="exchange_tit fl">
                            是否收到货：
                        </div>
                        <div class="exchange_list">
                            <el-radio v-model="radio" label="1" @change='isReceiveds' class="radio_item">是</el-radio>
                            <el-radio v-model="radio" label="2" @change='noReceived' class="radio_item">否</el-radio>
                        </div>
                    </div> -->
                    <div class="exchange_item">
                        <div class="exchange_tit fl">
                            处理方式：
                        </div>
                        <div class="exchange_list">
                            <el-radio @change='change_style' v-model="applyType" label="0" class="radio_item">退款</el-radio>
                            <el-radio @change='change_style' v-model="applyType" label="1" class="radio_item">换货</el-radio>
                        </div>
                    </div>
                    <div class="exchange_item">
                        <div class="exchange_tit fl">
                            退款金额：
                        </div>
                        <div class="exchange_list">
                            <input type="text" name="" v-model='money' id="" class="money_input">
                        </div>
                    </div>
                    <div class="exchange_item">
                        <div class="exchange_tit fl">
                            退款原因：
                        </div>
                        <div class="exchange_list">
                            <el-select @change="handleCommand" v-model='options.item'  placeholder="请选择退换类型">
                                <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="exchange_item">
                        <div class="exchange_tit fl">
                            退款说明：
                        </div>
                        <div class="exchange_list">
                            <textarea name="" id="" cols="30"  v-model="content" rows="10" class="exchange_text"></textarea>
                        </div>
                    </div>
                    <div class="exchange_item">
                        <div class="exchange_tit fl">
                            上传照片：
                        </div>
                        <div class="exchange_list fl">
                            <el-upload action="http://39.96.36.44:8080/xmsc/upload/singleUploadImg" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :limit='4' :on-error='up_error' :on-success='up_success' :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                        </div>
                    </div>
                    <div class="exchange_item">
                        <div class="exchange_list fl">
                            <div class="exchange_submit cursor" @click='exchange_submit()'>
                                提交
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>





       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
     
    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    radio: '1',
                    options: [],
                    dialogImageUrl: '',
                    dialogVisible: false,
                    car_active:false,
                    groups:3,
                    value: '',
                    imageUrl: '',
                    orderId:'',
                    goodsId:'',
                    img_list:'',
                    content:'',
                    isReceived:1,
                    reason:'',
                    applyType:'',
                    money:'',
                    abonormalType:''
                };
            },
            created() {
                
            },
            mounted() {
                this.goodsId = this.GetQueryString().listid
            },
            methods: {
                handleCommand(value){
                    this.abonormalType = value
                },
                change_style(){
                    if(this.applyType==1){
                        this.options=[]
                        this.options.push({
                        value: '和卖家协商一致',
                        label: '和卖家协商一致'
                        }, {
                        value: '商品破损',
                        label: '商品破损'
                        }, {
                        value: '与描述不一致',
                        label: '与描述不一致'
                        }, {
                        value: '其它原因',
                        label: '其它原因'
                        })
                    }else if(this.applyType==0){
                        this.options=[]
                        this.options.push({
                        value: '信息填写错误，重新购买',
                        label: '信息填写错误，重新购买'
                        }, {
                        value: '未收到货',
                        label: '未收到货'
                        }, {
                        value: '和卖家协商一致',
                        label: '和卖家协商一致'
                        }, {
                        value: '商品破损',
                        label: '商品破损'
                        }, {
                        value: '与描述不一致',
                        label: '与描述不一致'
                        }, {
                        value: '其它原因',
                        label: '其它原因'
                        })
                    }
                    console.log(command)
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
                isReceiveds(){
                    this.isReceived = 1
                },
                noReceived(){
                    this.isReceived = 0
                },
                // 换货
                exchange_submit(){
                    // this.img_list = this.img_list.substring(0,this.img_list.length-1)
                    if (this.applyType=='') {
                        app.$message.error('请选择退换类型');
                    }
                    axios({
                        method:"POST",
                        url:base_url + "/orc/afr",
                        data:Qs.stringify({
                            goodsId:this.goodsId,
                            applyType:this.applyType,
                            money:this.money,
                            abonormalType:this.abonormalType,
                            imgs:this.img_list,
                            content:this.content
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code==1) {
                            window.location.href='../person_vip/person_center.html'
                        }
                    })
                    .catch(function (error) {
                    });
                },
                radio_item(){

                },
                // 显示购物车               
                go_shop_car(){
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                handleRemove(file, fileList) {
                    this.img_list = ''
                    for (let i = 0; i < fileList.length; i++) {
                        this.img_list += fileList[i].response.data.imgUrl
                    }
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                up_success(file){
                    this.img_list += file.data.imgUrl+','
                    console.log(this.img_list)
                },
                up_error(res){
                    console.log(res)
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                person_order(){
                    window.location.href='../person_vip/person_order.html'
                },
                person_address(){
                    window.location.href='../person_vip/person_address.html'
                },
                person_center(){
                    window.location.href='../person_vip/person_center.html?index='+0
                },
                person_integral(){
                    window.location.href='../person_vip/person_integral_order.html'
                },
                person_collection(){
                    window.location.href='../person_vip/person_collection.html'
                },
                person_foot(){
                    window.location.href='../person_vip/person_footprint.html'
                },
                person_info(){
                    window.location.href='../person_vip/person_info.html'
                },
                person_message(){
                    window.location.href='../person_vip/person_message.html'
                },
                person_ticket(){
                    window.location.href='../person_vip/person_ticket.html'
                },
            }
        })
        
    </script>
</body>

</html>